<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    
    <link rel="stylesheet" href="./dmo/dist/css/bootstrap.css">

    <link href="./dmo/css/register.css" rel="stylesheet">
</head>
<script src="./dmo/js/jquery-3.7.0.js" type="text/javascript"></script>

<body>
    <div class="container">
    <h1>注册</h1>

<!-- 用户名界面 -->
<div class="form-inline">
<div class="form-group">
          <label class="form-control-static describe-text">用户名：</label>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" id="username" placeholder="Username" required>
        </div>
        <button class="btn btn-default" id="username_exist">用户名检查</button>
        <span class="warning addedbutton" id="username_exist_result"></span>
    </div>
        <img id="verification_img" src="
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
kZKv3R4VSIsLYIkD2uWelm3gSYc0DdSY9WDx7mbItyC+tA3j72UoJINPnpPb+pJJcAXn52zO5129
G87NbYfnSh7iUroUyo2UHN87l6b11wuW/oivW47tCkRe3PqPM7GxbLMqlhcFkunYXYHI9zhQ8aST
8HeoROG+0Hih4dy1PknF4W8nA7OmQRORuXvS79jXsAgEQXVUj5XhyLA2NHFbunOurulAQbJxRnju
q6nCIMWD7I1pHTeGvkjHce3sF8WWhXRAH8+DP/sji0BXY+D3bnzT+Wdf3I5NVG6F/jMvqER223np
R8vEt//CDY/4x8RqfyjNk+TdeK+sDoWf/ZHFIfczPpKNW3XaY372+reuSj93hLhi+LohFkM7nnMx
TCs1u5cn1Et50XSU1c7a8I4rHQOygnk1D0R6va23P5yh/INysiL4hRiwvlcDhwVSBAJxP3wWfhhs
i7zsyQXXJ4ywYhUQrY3JTetfXnQNafqLuSAYbm4KW27IunkpM+3A0/VsHhe9IzdIMIopIr0lMyhP
eAau+/fignLMmP7vVvJB/fH8fkIghPyL+NnNioT8n0OBEKJAgRCiQIEQokCBEKJAgRCiQIEQokCB
EKJAgRCiQIEQokCBEKJAgRCiQIEQokCBEKJAgRCiQIEQokCBEKJAgRCiQIEQokCBEKJAgRCiQIEQ
okCBEKJAgRCiQIEQokCBEKJAgRCiQIEQokCBEKJAgRCiQIEQokCBEKJAgRBSxJj/AnsjIzdFiAwf
AAAAAElFTkSuQmCC">
        <!-- 获取图形验证码 -->
        <button id="get_verification_img" class="btn btn-default  btn-image">获取图形验证码</button>
        <span class="warning" id="get_verification_img_result"></span>
 
        <!-- 邮箱 -->

        <div class="form-inline">
            <div class="form-group">
              <label class="form-control-static describe-text ">邮箱：</label>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" id="parameter" placeholder="Email" required>
            </div>
            <button type="submit" class="btn btn-default" id="get_verification">获取验证码</button>
            <span class="warning" id="get_verification_result"></span>
        </div>
    
        <!-- 邮箱验证码 -->
        <div class="from-group">
            <label class="describe-text col-sm-2 control-label">验证码：</label>
            <div class="col-sm-10">
            <input id="verification_code" type="text" class="form-control" required>
            </div>
        </div>





    <!-- 图形验证码输入框 -->
    <div class="from-group">
        <label class="describe-text col-sm-2 control-label">图形验证码</label>
    
        <div class="col-sm-10">
        <input id="verification_img_code" type="text" class="form-control" required>
        </div>
    </div>

       


    <!-- 密码输入框 -->
    <div class="from-group">
        <label class="describe-text col-sm-2 control-label">密码：</label>
        <div class="col-sm-10">
        <input id="password" type="password" class="form-control" placeholder="password" required>
        </div>
    </div>

    <button class="submit-button" id="register">注册</button>
</div>


<script>
    var base_url = "http://101.33.204.176:8080/user";
    $("#username_exist").on("click", function (e) {
        // GET请求的后端接口
        var url = base_url + "/status/exist/"
        // 获取用户输入的表单数据
        var username = document.getElementById("username").value;
        $.ajax({
            type: "get",    //请求方式
            async: true,    //是否异步
            url: url,
            data: {"userName": username},    //请求参数
            success: function (data) {
                if(data.msg == "用户名已存在"||"用户名不存在"){
                    alert(data.msg)
                }else{
                    document.getElementById("username_exist_result").innerHTML = data.msg;
                }
                
            }
        });
    })

    $("#get_verification_img").on("click", function (e) {
        // GET请求的后端接口
        var url = base_url + "/verification/turing/"
        // 获取用户输入的表单数据
        var email = document.getElementById("parameter").value;

        $.ajax({
            type: "post",    //请求方式
            async: true,    //是否异步
            url: url,
            data: {"email": email},    //请求参数
            success: function (data) {

                if(data.msg == "请先填写邮箱"){
                    alert(data.msg)
                }else{
                    console.log(data)
                if (data.code === 1) {
                    document.getElementById("get_verification_img_result").innerHTML = data.msg;
                    return;
                }
                document.getElementById("verification_img").src = 'data:image/png;base64,' + data.data;
                    
                }


            }
        });
    })

    $("#get_verification").on("click", function (e) {
        // GET请求的后端接口
        var url = base_url + "/verification/message/"
        // 获取用户输入的表单数据
        var email = document.getElementById("parameter").value;
        var verification_code = document.getElementById("verification_img_code").value;

        $.ajax({
            type: "post",    //请求方式
            async: true,    //是否异步
            url: url,
            data: {"email": email, "verificationCode": verification_code},    //请求参数
            success: function (data) {
                if(data.msg == "验证码不存在或已超时，请获取验证码"){
                    alert(data.msg)
                }
                else{
                    alert(data.msg)
                    // document.getElementById("get_verification_result").innerHTML = data.msg;
                }
            }
        });
    })

    $("#register").on("click", function (e) {
        // GET请求的后端接口
        var url = base_url + "/register/"
        // 获取用户输入的表单数据
        var username = document.getElementById("username").value;
        var email = document.getElementById("parameter").value;
        var verification_code = document.getElementById("verification_code").value;
        var password = document.getElementById("password").value;
        $.ajax({
            type: "post",    //请求方式
            async: true,    //是否异步
            url: url,
            data: {
                "userName": username,
                "email": email,
                "verificationCode": verification_code,
                "password": password
            },    //请求参数
            success: function (data) {
                // document.getElementById("register_result").innerHTML = data.msg;
                // 重定向到登陆界面 
                window.location.href = "./login.html";
            }
        });
    })
</script>
</body>
</html>